<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <style type="text/css">
        /* 伪元素选择器 ::before/::after------再选中元素的内容之前/后插入内容*/
        a::before {
            content: "Click here to ";
        }

        a::after {
            content: "!";
        }
    </style>
</head>

<body>
    <a href="http://apress.com">Visit the Apress website</a>
    <p>I like <span>apples</span> and oranges.</p>
    <a href="http://w3c.org">Visit the W3C website</a>
</body>

</html>